<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <link href="task2.css" rel="stylesheet" type="text/css"/>
    <title>Task2 of IEF2016 Spring</title>
</head>

<body>
    <header>
        <h1><img src="baidu_logo_top.png" /></h1>
        <nav>
            <ul>
                <li><a href="#top">导航链接一</a></li>
                <li><a href="#top">导航链接二</a></li>
                <li><a href="#top">导航链接三</a></li>
                <li><a href="#top">导航链接四</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <article class="first">
                <h2>文章一级标题</h2>
                <article>
                    <h3>文章二级标题</h3>
                    <address>文章作者</address>
                    <time>文章发表时间</time>
                    <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
                        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
                        这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，
                        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
                        <a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>
                        这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>
                        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
                    </p>
                    <figure>
                            <img src="yintama.gif" />
                    </figure>
                    <p>
                        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
                        这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，
                        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
                        <strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，
                        <a href="http://ife.baidu.com" target="_blank">这里有个链接点击后打开新窗口链接到http://ife.baidu.com</a>
                        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
                        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，    
                    </p>
                </article>
            </article>
            
            <article class="second">
                <h2>另一篇文章一级标题</h2>
                <article>
                    <h3>文章二级标题</h3>
                    <address>文章作者</address> 
                    <time>文章发表时间</time>
                    <p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                        这是一个很长的段落，这是一个很长的段落，换行<br />
                        这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                        这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                        这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                        这是一个很长的段落，<a href="http://ife.baidu.com">这里有
                        一个链接链接到http://ife.baidu.com</a>这是一个很长的段落，
                        这是一个很长的段落，这是一个很长的段落，<strong>这里有个粗体
                        字</strong>
                    </p>
                    <figure><img src="yintama.gif"></figure>
                    <ul>
                        <li>列表项目一</li>
                        <li>列表项目二</li>
                        <li>列表项目三</li>
                    </ul>
                </article>
            </article>
            
            <article class="third">
                <h2>图片</h2>
                <figure>
                    <ul>
                        <li><figcaption>好看的图片</figcaption><img src="yintama.gif" /></li>
                        <li><figcaption>好看的图片</figcaption><img src="yintama.gif" /></li>
                        <li><figcaption>好看的图片</figcaption><img src="yintama.gif" /></li>
                        <li><figcaption>好看的图片</figcaption><img src="yintama.gif" /></li>
                        <li><figcaption>好看的图片</figcaption><img src="yintama.gif" /></li>
                        <li><figcaption>好看的图片</figcaption><img src="yintama.gif" /></li>
                        <li><figcaption>好看的图片</figcaption><img src="yintama.gif" /></li>
                        <li><figcaption>好看的图片</figcaption><img src="yintama.gif" /></li>
                        <li><figcaption>好看的图片</figcaption><img src="yintama.gif" /></li>
                        <li><figcaption>好看的图片</figcaption><img src="yintama.gif" /></li>
                    </ul>
                </figure>  
            </article>
            
            <article class="fourth">
                <h2>最后一篇文章一级标题</h2>
                <article>
                    <h3>文章二级标题</h3>
                    <address>文章作者</address>
                    <time>文章发表时间</time>
                    <ol>
                        <li>排名1</li>
                        <li>排名2</li>
                        <li>排名3</li>
                    </ol>
                    <figure>
                        <table>
                            <caption>下面是一个表格</caption>
                            <tbody>
                                <tr>
                                    <th>表头</th>
                                    <th>表头</th>
                                    <th>表头</th>
                                </tr>
                                <tr>
                                    <td>表内容单元格</td>
                                    <td>表内容单元格</td>
                                    <td><a href="#">操作</a></td>
                                </tr>
                                <tr>
                                    <td>表内容单元格</td>
                                    <td>表内容单元格</td>
                                    <td><a href="#">操作</a></td>
                                </tr>
                                <tr>
                                    <td>表内容单元格</td>
                                    <td>表内容单元格</td>
                                    <td><a href="#">操作</a></td>
                                </tr>
                                <tr>
                                    <td>表内容单元格</td>
                                    <td>表内容单元格</td>
                                    <td><a href="#">操作</a></td>
                                </tr>
                                <tr class="tail">
                                    <td>总计</td>
                                    <td colspan=2>1000</td>
                                </tr>
                            </tbody>
                        </table>
                    </figure>
                </article>
            </article>    
        </section>
        
        <aside>
            <h2>这里以后是一个侧栏，这是侧栏标题</h2>
            <form method="POST">
                <div class="email">
                    <label for="email" class="left">请输入邮箱地址</label>
                    <input type="text" id="email" value="这是一个文本框" class="right" />
                    <p class="right">邮箱地址请按要求格式输入</p>
                </div>
                <div class="password">
                    <label for="password" class="left">请输入密码</label>
                    <input type="password" id="password" value="这是一个文本框" class="right" />
                </div>
                <div class="re-password">
                    <label for="re-password" class="left">请重复输入密码</label>
                    <input type="password" id="re-password" value="这是一个文本框" class="right" />                
                    <p class="right">密码请为6-16位英文数字</p>
                </div>              
                <div class="gender">
                    <label for="man" class="left">性别</label>
                    <input type="radio" name="sex" value="male" id="man" checked="checked"/>
                    <label for="man">男</label>
                    <input type="radio" name="sex" value="female" id="woman" />
                    <label for="woman">女</label>
                </div>
                <div class="city">
                    <label for="city" class="left">城市</label>
                    <select id="city">
                        <option value="Beijing" selected="selected">北京</option>
                        <option value="Changzhi">长治</option>
                    </select>
                </div>
                <div class="habit">
                    <label class="left">爱好</label>
                    <input type="checkbox" id="sport" />
                    <label for="sport">运动</label>
                    <input type="checkbox" id="art" />
                    <label for="art">艺术</label>
                    <input type="checkbox" id="science" />
                    <label for="science">科学</label>
                </div>
                <div class="profile">
                    <label for="profile" class="left">个人描述</label>
                    <textarea id="profile">这是一个多行输入框，输入您的个人描述</textarea>
                </div>
                <div class="submit">
                    <input type="submit" value="确认提交" class="button" />
                </div>
            </form>
        </aside>
    </main>
    
    <footer>
        <address>版权所有© <a href="https://github.com/WildeLau">Wilde Lau</a></address>
    </footer>
</body>
